<template>
    <div class="layout">
        <div class="population">
            <p class="population_title">今日客户跟进人数</p>
            <p class="population_num">{{ props.basicInfo.follow_num }}</p>
        </div>
        <div class="population">
            <p class="population_title">今日客户跟进记录</p>
            <p class="population_num">{{ props.basicInfo.follow_record }}</p>
        </div>
        <div class="population">
            <p class="population_title">累计客户跟进人数</p>
            <p class="population_num">{{ props.basicInfo.sum_follow_num }}</p>
        </div>
        <div class="population">
            <p class="population_title">累计客户跟进记录</p>
            <p class="population_num">{{ props.basicInfo.sum_follow_record }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
const props = withDefaults(
    defineProps<{
        basicInfo: any;
    }>(),
    {
        basicInfo: {
            follow_num: 0,
            follow_record: 0,
            sum_follow_num: 0,
            sum_follow_record: 0
        }
    }
);
</script>

<style lang="scss" scoped>
p {
    padding: 0;
    margin: 0;
}

.layout {
    padding: 32px 24px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #eaeaea;

    .population {
        text-align: left;

        &_title {
            margin-bottom: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        &_num {
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }

        &_border {
            height: 104px;
            border-left: 1px solid #f0f0f0;
            margin: 0 210px;
        }
    }
}
</style>
